<template>
    <div class="mr-root">
         
        <public-header>
              
            <i class="fa fa-qrcode" id="i" @click="show"></i>
         
             <div class="tabbar">   
            <ul>
                <li v-for="i in tabbar">
                    <router-link :to="'/image/yi'+i">
                    <span>{{i}}</span>
                    </router-link>
                    </li>
                 
            </ul>
          
        </div>

        </public-header>
      
        <div class="content"  v-for="n in hua">
            <router-link :to="'/image/Mitodetails/'+n.id+'/'+n.label">
            <div class="fuimg">
                    <img :src=n.images class="img3" alt="">
                   
             </div>
             <div class="nei">
                  <p>动漫图片{{n.label}}漫画壁纸美图下载</p>
                        <img :src=n.userIDInfo.images id="san" alt="">
                        <span id="si">{{n.userIDInfo.name}}</span>
               </div>
               </router-link>
            </div>
          <p id="jiazai" @click="loadmore">点击加载更多</p>
           <div class="kong"></div>
               <hfooter></hfooter>
              <back-top></back-top>
        
        <loading v-if="showload"></loading>
        </div>
</template>
<script>
    import PublicHeader from '../components/Header'
    import loading from '../components/Loding'
    import Hfooter from '../components/Footer'
    import BackTop from '../components/BackTop'
    export default {
        data() {
            return {
                showload: true,
                more:1,
                hua:[],
                tabbar:[]
            }
        },
        components: {
            PublicHeader, loading, Hfooter, BackTop
        },
     created(){
             this.duo(this.more) 
             this.axios.get(`https://api.maimengjun.com/index.php?r=prettyImages/getLabelList&page=1&size=43`)
             .then(data=>{
                 this.tabbar=data.data.results
                //  console.log(this.tabbar)
             })
        },
        methods:{
            duo(pages){
                this.axios.get('https://api.maimengjun.com/index.php?r=prettyImages/list&page='+pages+'&size=10&searchLabel=')
                .then(data=>{
                     this.hua=this.hua.concat(data.data.results)
                    console.log(this.hua)
                   this.showload=false
                })
                .catch(err=>{
                    console.log(err)
                })
            },
           loadmore(){
                  this.more++
                this.duo(this.more)
             },
             show(){
                 $('.tabbar').slideToggle()
             }
        }
    }

</script>

<style scoped>
#i{
    position: relative;
    left:0.2rem;
    top:0.4rem;
    color:#999;
}
 .tabbar{
    position: fixed;
    top: 1.8rem;
    width: 100%;
    background: #fff;
    z-index: 99;
 }
.tabbar>ul>li{
    margin-top: .1rem;
    text-align: center;
    width:15%;
    float: left;
}
.tabbar{
    display: none;
}
.tabbar>ul>li span{
    display: inline-block;
    width: 2rem;
    line-height: 0.8rem;
    font-size: 0.3rem;
    color: #999;
    border-radius: .02rem;
    border: 1px solid #ccc;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mr-root{
    margin-top: 2rem;
}
   #si {
        display: inline-block;
        position: relative;
        top: -0.1rem;
        left: 0.4rem;
   }
    #san {
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
    }
    
    img.img3 {
        width: 4rem;
        height: 4rem;
        margin-left: 0.47rem;
    }
    
   #jiazai{
      line-height: 0.7rem;
       width: 3rem;
       background: pink;
       color: white;
       text-align: center;
       margin:0.3rem auto;
       border-radius: 7px;
   }
 .kong{
       height: 60px;
       width: 100%;
       }
       .content{
           display: inline-block;
           width: 5rem;
           color: gray;
       }
       .nei{
           width: 4rem;
           margin-left: 0.48rem;
       }
       .nei>p{
           font-weight: bolder;
       }
</style>